<template>
  <div class="overview-stats">
    <div class="stat-card">
      <div class="stat-label">使用房间数</div>
      <div class="stat-value">{{ totalRooms }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">服务请求次数</div>
      <div class="stat-value">{{ totalRequests }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">总耗电量(度)</div>
      <div class="stat-value">{{ totalPower.toFixed(2) }}</div>
    </div>
    <div class="stat-card highlight">
      <div class="stat-label">总费用</div>
      <div class="stat-value">¥{{ totalCost.toFixed(2) }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">平均费用/房间</div>
      <div class="stat-value">¥{{ avgCost.toFixed(2) }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  totalRooms: number;
  totalRequests: number;
  totalPower: number;
  totalCost: number;
  avgCost: number;
}>();
</script>

<style scoped>
.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  border: 2px solid #f0f4f8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.stat-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.stat-card.highlight {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.stat-card.highlight:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.stat-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
}

.stat-card.highlight .stat-value {
  color: #067ef5;
}

.stat-card.highlight .stat-label {
  color: #0369a1;
}
</style>

